<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function list(){
				//创建xhr异步对象
				var xhr=new XMLHttpRequest();
				//打开链接
				xhr.open('GET',`/pro/v1/list`,true);
				//发送请求
				xhr.onreadystatechange=function(){
				 if(xhr.readyState==4&&xhr.status==200){
					 var r=xhr.responseText;
					 //JSON,转为对象
					 var arr=JSON.parse(r);
					 //表头
					 var htmlStr=`
					   <table border="1" cellspacing="0">
					   	<tr>
					   		<th>用户昵称</th>
					   		<th>用户邮箱</th>
					   		<th>用户电话</th>
					   		<th>用户姓名</th>
					   		<th>用户性别</th>
					   		<th>用户操作</th>
					   	</tr>
					 `;
					 //循环
					 for(var i=0;i<arr.length;i++){
						 var sex="不详";
						 if(arr[i].gender==1){
							 sex="男";
						 }else if(arr[i].gender==0){
							 sex="女";
						 }else{
							 sex="不详";
						 }
						 htmlStr+=`
						  <tr>
							 <td>${arr[i].uname}</td>
							 <td>${arr[i].email}</td>
							 <td>${arr[i].phone}</td>
							 <td>${arr[i].user_name}</td>
							 <td>${sex}</td>
							 <td>
							 <a href="#">删除</a>
							 <a href="#">修改</a>
							 </td>
							</tr> 
						 `;
					 }
					 //表尾
					 htmlStr+=`</table>`;
					 d1.innerHTML=htmlStr;
				 }
				}
				//接收响应
				xhr.send();
			}
		</script>
	</head>
	<body onload="list()">
		<!-- <button type="button"></button> -->
		<div id="d1">
			
		</div>
	</body>
</html>
